<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <title>实现一个地震热力图
    </title>
    <link rel="stylesheet" href="../include/ol.css" type="text/css">
    <script src="../include/ol.js"></script>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <form>
        <label>半径大小</label>
        <input id="radius" type="range" min="1" max="50" step="1" value="5" />
        <label>模糊半径</label>
        <input id="blur" type="range" min="1" max="50" step="1" value="15" />
    </form>
    <div id="map" class="map">
    </div>
    <script>
        var blur = document.getElementById("blur");
        var radius = document.getElementById("radius");

        var vector = new ol.layer.Heatmap({
            source: new ol.source.Vector({
                url: '../data/2012_Earthquakes_Mag5.kml',
                format: new ol.format.KML({
                    extractStyles: false
                })
            }),
            blur: parseInt(blur.value, 10),
            radius: parseInt(radius.value, 10)
        });

        vector.getSource().on('addfeature', function(event){
            var name = event.feature.get('name');
            var magnitude = parseFloat(name.substr(2));
            event.feature.set('weight', magnitude-5);
        });

        var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
                center: [0,0],
                zoom: 2
            })
        });

        blur.addEventListener('input', function(){
            vector.setBlur(parseInt(blur.value,10));
        });

        radius.addEventListener('input', function(){
            vector.setRadius(parseInt(radius.value,10));
        });

    </script>
</body>

</html>